<template>
  <div class="index" :style="{height:page_height+'px'}">
    <cube-scroll ref="scroll">

      <!--S主体-->
        <!--S门店信息-->
        <div id="header">
          <img class="logo" :src="store.logo" />
          <div class="info">
            <div class="name">{{store.name}}</div>
            <div class="id">门店id:{{store.id}}</div>
            <div class="address">地址:{{store.address}}</div>
            <div class="stats">状态:
              <template v-if="store.status == 1">正常</template>
              <template v-else-if="store.status == 2">审核中</template>
              <template v-else-if="store.status == 3">拒绝审核</template>
              <template v-else-if="store.status == 4">锁定</template>
            </div>
            <div class="sell-range">经营范围:<div v-for="item in store.sell_range">{{item.name}}</div></div>
          </div>
        </div>
        <!--E门店信息-->

        <!--S身份,职位-->
        <div id="position">
          职位:
          <template v-if="store.position_id == 0">店长</template>
          <template v-else>{{store.position}}</template>
        </div>
        <!--E身份,职位-->

        <!--S操作面板-->
        <div id="panel">
          <dl v-if="store.position_id == 0 || store.authority.includes('store')">
            <router-link class="a" to="/edit/edit">
              <dt>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconmendianbanli_huaban"></use>
                </svg>
              </dt>
              <dd>修改信息</dd>
            </router-link>
          </dl>

          <dl v-if="store.position_id == 0">
            <router-link class="a" to="/transfer">
              <dt>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconfix_boss"></use>
                </svg>
              </dt>
              <dd>转让店长</dd>
            </router-link>
          </dl>

          <dl v-if="store.position_id == 0 || store.authority.includes('coupon')">
            <router-link class="a" to="/coupon/0/0">
              <dt>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconquan"></use>
                </svg>
              </dt>
              <dd>卡券管理</dd>
            </router-link>
          </dl>

          <dl v-if="store.position_id == 0 || store.authority.includes('activity')">
            <router-link class="a" to="/activity">
              <dt>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconyingxiaohuodong_shoudongfafangyouhuiquan"></use>
                </svg>
              </dt>
              <dd>投放卡券</dd>
            </router-link>
          </dl>

<!--          <dl v-if="store.position_id == 0 || store.authority.includes('activity')"><dt><i class="iconfont iconhuodongjilu01"></i></dt><dd>活动记录</dd></dl>-->
          <dl v-if="store.position_id == 0 || store.authority.includes('staff')">
            <router-link class="a" to="/staff">
              <dt>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconyuangong"></use>
                </svg>
              </dt>
              <dd>员工管理</dd>
            </router-link>
          </dl>

          <dl v-if="store.position_id == 0 || store.authority.includes('staff')">
            <router-link class="a" to="/statistic">
              <dt>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icontongji1"></use>
                </svg>
              </dt>
              <dd>卡券统计</dd>
            </router-link>
          </dl>

          <dl v-if="store.position_id == 0 || store.authority.includes('verify')" @click="clickScan">
            <dt>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconsaoyisao"></use>
              </svg>
            </dt>
            <dd>扫一扫核销</dd>
          </dl>

        </div>
        <!--E操作面板-->
      <!--E主体-->

    </cube-scroll>


    <!--S子页面-->
    <transition :name="transition_name">
      <router-view class="childred-page"/>
    </transition>
    <!--S子页面-->
  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
export default {
  name: 'index',
  data(){
    return {
      page_height:store.state.height,
      transition_name:'', //子页面切换动画
      //门店信息
      store:{
        name:'',
        logo:'',
        id:'',
        address:'',
        position_id:0,
        position:'',
        authority:[],
        sell_range:[],
        status:1
      }
    }
  },
  created(){
    this.loadStoreData();
  },
  //子切换页面动画
  beforeRouteUpdate(to, from, next){
    if(from.name == 'edit'){
      this.loadStoreData();
    }
    this.transition_name = to.meta.sort > from.meta.sort ? 'animated slideInRight faster delay-2s' : 'animated slideOutRight faster delay-2s';
    setTimeout(()=>{
      next();
    },10);
  },
  methods:{
    //加载数据
    loadStoreData(){
      common.store()
              .then((data)=>{
                if(data){
                  this.store.id = data.store_id;
                  this.store.name = data.name;
                  this.store.logo = sysinfo.attachurl_local+data.logo;
                  this.store.address = data.address;
                  this.store.position_id = data.position_id;
                  this.store.position = data.position;
                  this.store.authority = data.authority;
                  this.store.sell_range = data.sell_range;
                  this.store.status = data.status;
                }else{
                  this.$router.push('/edit/add');
                }
              })
              .catch(error=>console.log(error));
    },
    //扫一扫
    clickScan(){
      if(!sysinfo.develop){
        wx.ready(()=>{
          wx.scanQRCode({
            needResult: 0,
            scanType: ["qrCode"]
          });
        });
      }else{
        console.log('调用微信扫一扫');
      }
    }
  }
}
</script>

<style scoped>
  #header{
    min-height:150px;
    background: #FC9153;
    padding:0 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  #header .logo{
    width:120px;
    height:120px;
    border-radius: 120px;
    border:2px solid #fff;
    box-sizing: border-box;
    margin:15px 10px 0 10px;
    float: left;
  }
  #header .info{
    width:210px;
    float:right;
    font-size:16px;
    padding-top:15px;
  }
  #header .info div{
    margin-bottom:5px;
    color:#fff;
  }
  #header .info div.name{
    font-size:17px;
  }
  #header .sell-range div{
    display: inline-block;
    padding:2px 10px;
    border:1px solid #fff;
    margin-left:5px;
    border-radius: 15px;
    font-size:14px;
  }
  #position{
    background: #FC9153;
    height:40px;
    line-height: 40px;
    color:#fff;
    padding:0 10px;
    margin-top:1px;
    font-size:16px;
  }
  #panel{
    padding:0 10px;
    margin-top:10px;
    overflow: hidden;
  }
  #panel dl{
    float:left;
    width:88.5px;
    height:85px;
    color:#000;
    border:1px solid #eee;
    box-sizing: border-box;
    border-top:none;
    border-right:none;
  }
  #panel dl .a{
    color:#000;
  }
  #panel dl:nth-of-type(1),#panel dl:nth-of-type(2),#panel dl:nth-of-type(3),#panel dl:nth-of-type(4){
    border-top:1px solid #eee;
  }
  #panel dl:nth-of-type(4n){
    border-right:1px solid #eee;
  }
  #panel dl:nth-last-child(1){
    border-right:1px solid #eee;
  }
  #panel dt{
    height:60px;
    background-size: 60px;
    text-align: center;
    line-height: 60px;
  }
  #panel dt .icon{
    width:55px;
    height:55px;
    margin-top:4px;
  }
  #panel dl:nth-of-type(2) dt .icon{
    width:50px;
    height:50px;
    margin-top:7px;
  }
  #panel dd{
    height:20px;
    line-height: 20px;
    text-align: center;
    font-size:14px;
  }
  #panel .iconqiaquan-copy{
    position: relative;
    left:-5px;
  }
</style>
